<template>
    <div class="count-goods">
        <!-- 时间范围 -->
         <div class="block">
            <span class="demonstration">时间范围</span>
            <el-date-picker
                v-model="value"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                align="left">
            </el-date-picker>
        </div>

        <!-- 图表 -->
        <div id="box" ref="box">

        </div>
    </div>
</template>

<script>
// 引入ECharts图标库
import * as echarts from 'echarts';
// 引入报表统计模块
import {totalData} from "@/api/report.js";

export default {
    data() {
      return {
        value: ''  //默认时间
      };
    },

    methods:{
        onSubmit() {
            console.log('submit!');
        }
    },

    // 注意：代码必须写在mounted里面，才能获取到页面容器
    async mounted(){
        let res = await totalData();
        console.log(res)

        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(this.$refs.box);
        // 绘制图表
        myChart.setOption({
            title: {
                text: '堆叠区域图',
                top:10,
                left:20
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985'
                }
                }
            },
            legend: {
                data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎'],
                top:10
            },
            toolbox: {
                feature: {
                saveAsImage: {}
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [
                {
                type: 'category',
                boundaryGap: false,
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                }
            ],
            yAxis: [
                {
                type: 'value'
                }
            ],
            series: [
                {
                name: '邮件营销',
                type: 'line',
                stack: 'Total',
                areaStyle: {},
                emphasis: {
                    focus: 'series'
                },
                data: [120, 132, 101, 134, 90, 230, 210]
                },
                {
                name: '联盟广告',
                type: 'line',
                stack: 'Total',
                areaStyle: {},
                emphasis: {
                    focus: 'series'
                },
                data: [220, 182, 191, 234, 290, 330, 310]
                },
                {
                name: '视频广告',
                type: 'line',
                stack: 'Total',
                areaStyle: {},
                emphasis: {
                    focus: 'series'
                },
                data: [150, 232, 201, 154, 190, 330, 410]
                },
                {
                name: '直接访问',
                type: 'line',
                stack: 'Total',
                areaStyle: {},
                emphasis: {
                    focus: 'series'
                },
                data: [320, 332, 301, 334, 390, 330, 320]
                },
                {
                name: '搜索引擎',
                type: 'line',
                stack: 'Total',
                label: {
                    show: true,
                    position: 'top'
                },
                areaStyle: {},
                emphasis: {
                    focus: 'series'
                },
                data: [820, 932, 901, 934, 1290, 1330, 1320]
                }
            ]
        });

        // 重置图标大小
        window.onresize = function(){
            myChart.resize();
        }
    },

    destroyed(){
        window.onresize = null;  //组件销毁时自动去除window事件
    }
}
</script>

<style lang="less" scoped>
// 时间范围
.block{
    margin-bottom: 20px;

    &>span{
        margin-right: 20px;
    }
}

// 图表
#box{
    height: 470px;
    background-color: #fff;
}
</style>